<%--
  Created by IntelliJ IDEA.
  User: 27716
  Date: 2024/10/29
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>列表</title>
    <script src="../../static/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../../static/css/css.css">
    <script>
        $(function (){
            let customerName = $("#customerName").val();
            let obj = {customerName:customerName};
            getCustomerList(obj);
        })
        //定义函数
        function getCustomerList(obj) {
            $.ajax({
                url: "/customer/getCustomerList",
                type: "post",
                data: {reqInfos: JSON.stringify(obj)},
                dataType: "json",
                success(res) {
                    console.log(res);
                    let arr = res.list;
                    $("#table").empty();
                    $("#table").append(`
                        <tr>
                            <td>客户编号id</td>
                            <td>客户名称</td>
                            <td>联系人</td>
                            <td>联系人电话</td>
                            <td>客户地址</td>
                        </tr>
                    `)
                    for (let o of arr) {
                        $("#table").append(`
                        <tr>
                            <td>\${o.customerId}</td>
                            <td>\${o.customerName}</td>
                            <td>\${o.contacts}</td>
                            <td>\${o.phoneNumber}</td>
                            <td>\${o.address}</td>
                        </tr>
                       `)
                    }
                    //追加4个按钮
                        $("#table").append(`
                        <tr>
                            <!--//按钮居中-->
                            <td colspan="100">
                                <input type="button" value="首页" onclick="doPage(1)">
                                <input type="button" value="上一页" onclick="doPage(\${res.prePage})">
                                <input type="button" value="下一页" onclick="doPage(\${res.nextPage})">
                                <input type="button" value="尾页" onclick="doPage(\${res.pages})">
                            </td>
                        </tr>
                    `)
                },
                    error()
                    {
                        alert("服务器错误")
                    }
            })
        }
    </script>
</head>
<body>
<input type="text" id="customerName">
<input type="button" value="搜索" id="search">
<table id="table">
    <tr>
        <td>客户编号id</td>
        <td>客户名称</td>
        <td>联系人</td>
        <td>联系人电话</td>
        <td>客户地址</td>
    </tr>
</table>
</body>
<script>
    $("#search").click(function (){
        let customerName = $("#customerName").val();
        let obj = {customerName:customerName};
        getCustomerList(obj);
    })
    function doPage(pageNum){
        let customerName = $("#customerName").val();
        let obj = {customerName:customerName,pageNum:pageNum};
        getCustomerList(obj);
    }
</script>
</html>
